﻿{extend name="common/base"}
{block name="title"}商品页{/block}

<body>

{block name="content"}
	<!-- product -->
	<div class="product segments-page">
		<div class="container">
			<div class="row">
				<div class="col s6">
					<select class="browser-default" id="sel1" style="outline-color:transparent;">
						{volist name="grade_one_fenlei" id="val"}
						<option value="{$val.id}" {if condition="$fenlei_id eq $val.id"}selected {/if}>{$val.name}</option>
						{/volist}
				 	</select>
				</div>
				{empty name="grade_two_fenlei"}
				<div class="col s6">
					<select class="browser-default" id="sel2" style="outline-color:transparent;">									
						<option value="">全部</option>
					</select>
				</div>				
				{else /}
				<div class="col s6">
					<select class="browser-default" id="sel2" style="outline-color:transparent;">
						<option value="all" selected>全部</option>
						{foreach name="grade_two_fenlei" id="val2"}
						<option value="{$val2.id}">{$val2.name}</option>
						{/foreach}
					</select>
				</div>
				{/empty}

			</div>
			<div class="row" id="ajax-body">
				
			</div>
			
			<div class="pagination" id="ajax-page">
				<!-- <ul>
					<li class="disabled"><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
				</ul> -->
			</div>
			<div id="next"></div>
		</div>
	</div>
	<!-- end product -->
{/block}

{block name="footjs"}
<script>
//加载 分类页 商品列表
var pageNo = 1;
var loadStatus = 0;
var fenlei_id = window.location.search.substring(11);
function goodsList(fenlei_id){
    $.ajax({
        url:"{:Url('index/index/goodsList')}?pageNo="+pageNo,
        type:"post",
        data:{fenlei_id:fenlei_id},
        dataType:"json",//数据通信的类型
        success:function(data){
			console.log(data);
			if(data.code == 1){
				$("#ajax-body").append(data.data);
				pageNo++;
				loadStatus = 1;
			}
        }
    });
}
goodsList(fenlei_id);
//浏览器窗口的高度
var winHei = $(window).height();
// //元素距离页面顶部的高度
var tTop = $('#next').offset().top;
$(document).bind('scroll',function(){     //滚动加载Ajax方法
    var sTop = $(window).scrollTop();     //滚动条距离页面顶部的高度
    if((winHei + sTop >= tTop) && loadStatus == 1){
      loadStatus = 0;
      goodsList(fenlei_id);
    }
});
//Ajax 改变一级分类获取数据
$("select#sel1").change(function(){
	$("#ajax-body").empty();
	pageNo = 1;	
	loadStatus = 0;
	fenlei_id = $(this).val();
	goodsList(fenlei_id);
	sel2_change($(this).val());
})
//Ajax 改变二级分类获取数据
$("select#sel2").change(function(){
	$("#ajax-body").empty();
	pageNo = 1;	
	loadStatus = 0;
	if($(this).val()=='all'){
		fenlei_id =$("select#sel1").val();
	}else{
		fenlei_id = $(this).val();
	}
	goodsList(fenlei_id);
})
function sel2_change(fenlei_id){
	$.ajax({
        url:"{:Url('index/index/sel2_change')}",
        type:"post",
        data:{fenlei_id:fenlei_id},
        dataType:"json",//数据通信的类型
        success:function(data){	
			console.log(data);
			if(data){
				var length = data.length;
				$("#sel2").empty();
				$("#sel2").append('<option value="all" selected>全部</option>');
				for(var i=0;i<length;i++){
					$("#sel2").append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
				}
			}else{
				$("#sel2").empty();
				$("#sel2").append('<option value="all" selected>全部</option>');
			}
        }
    });
}
</script>
{/block}